<!--
 * @Description: 首页
 * @Author: rendc
 * @Date: 2021-09-13 11:16:24
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-14 10:03:02
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>行学天下-首页</title>
  <script src="../../js/jquery.js"></script>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    html,
    body,
    .main {
      width: 100%;
      height: 100%;
    }

    .top {
      width: 100%;
      background-color: rgb(255, 54, 39);
      color: white;
      font-size: 30px;
      height: 70px;
      line-height: 70px;
      box-sizing: border-box;
    }

    .user {
      float: right;
    }

    .bottom {
      width: 100%;
      height: calc(100% - 70px);
    }

    .bottom-left {
      width: 170px;
      height: 100%;
      background-color: hotpink;
      float: left;
    }

    .bottom-left li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: rgb(62, 97, 239);
      color: white;
      font-size: 18px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }

    .bottom-left li:hover {
      background-color: rgb(56, 86, 211);
    }

    .bottom-right {
      width: calc(100% - 170px);
      height: 100%;
      background-color: #eee;
      float: left;
    }

    .content {
      width: 98%;
      height: 98%;
      background-color: #fff;
      margin-left: 1%;
      margin-top: 1%;
      border-radius: 5px;
      padding: 1%;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="top">
      <span>行学天下后台管理系统</span>
      <div class="user">
        欢迎，
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <ul>
          <li>用户管理</li>
          <li>栏目管理</li>
          <li>项目管理</li>
        </ul>
      </div>
      <div class="bottom-right">
        <div class="content"></div>
      </div>
    </div>
  </div>
</body>
<script>
  // 页面加载完成后 模拟点击菜单栏第一个项
  $(function () {
    $(".bottom-left li:first").trigger('click');
  })
  $(".bottom-left ul").on({
    click: function () {
      // console.log($(this));
      if ($(this).text() === '用户管理') {
        $(".content").load('./user.html')
      } else if ($(this).text() === '栏目管理') {
        $(".content").load('./column.html')
      } else if ($(this).text() === '项目管理') {
        $(".content").load('./project.html')
      }
    }
  }, "li")
  // 获取用户信息
  var token = sessionStorage.getItem("token")
  $.ajax({
    url: "http://203.195.246.58:8888/user/info?token=" + token,
    contentType: "application/json",
    headers: {
      "Authorization": token
    },
    success: function (res) {
      $(".user").append(res.data.username)
    }
  })
</script>

</html>